<template>
	
<div id="left">
    <div class="list-group wow fadeInDown" data-wow-duration=".8s" data-wow-delay=".2s">
        <div class="list-group-item">
            <strong>文章类别</strong>
        </div>
        <div class="list-group-item" v-for="category in categories">
            <span class="badge">{{category.count}}</span>
            <router-link tag='a' :to="{name:'recommend',params:{categoryId:category._id,pageTitle:category.title}}">
                {{category.title}}
            </router-link>
        </div>
    </div>
    <br />

    <ul class="list-group wow fadeInDown">
        <li class="list-group-item"><strong>联系方式</strong></li>
        <li class="list-group-item">
            <a href="#">
                <img src="../assets/img/erweima.jpg" class="img-responsive" />
            </a>
        </li>
    </ul>

    <br />
    <div class="wow fadeInDown">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">站内搜索</h3>
            </div>
            <div class="panel-body">
                <input type="text" class="form-control" placeholder="关键字" />
                <a href="#" class="btn btn-info btn-sm btn-block" style="margin-top: 10px">Search</a>
            </div>
        </div>
    </div>

</div>


            
</template>

<script>

export default {
    data() {
        return {
            categories: [],
        }
    },
	mounted: function() {
        setTimeout(() => {
            this.getCategoris()
        }, 500)
        
	},
	methods: {
		getCategoris: function() {
            this.$axios.get("/api/categories")
                    .then(res => {
                        // console.log(res)
                        this.categories = res.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
        }
	}
}
</script>